<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" id="designa" href="./css/common.css" type="text/css" media="all">
    <link rel="stylesheet" id="designa" href="./css/index.css" type="text/css" media="all">
    <script src="./js/jquery-2.1.1.min.js"></script>
    <script src="./js/jweixin-1.6.0.js"></script>
</head>

<body style="background-color:#eee; ">

    <div style="width: 100vw; height: 100vh;" class="font_16 color-666 border-red flexBox-c">
        <div class="div1 font_18 color-fff vCenter">
            <img id="icon" src="" style="width:50px; border-radius: 50%;">
            <span id="nickname" class="font_16"></span>
            <a class="a1" href="#">切换检测人</a>
        </div>
        <div class="tabs">
            <ul id="tabsUl">
                <li class="on">
                    <span class="pd-l10 pd-r10 inner">舌面图</span>
                </li>
                <li>
                    <span class="pd-l10 pd-r10 inner">舌下图</span>
                </li>
                <li><span class="pd-l10 pd-r10 inner">面部图</span></li>
            </ul>
        </div>
        <ul id="mainUl" class="flex1 over-auto mg-t10" style="padding-bottom: 50px;">
            <li>
                <div>
                    <div class="pd10">
                        <p style="margin-bottom: 10px;border-left: 1px solid #00a06e;" class="row25 pd-l5">中医体质健康状态</p>
                    </div>
                    <div style="border: 1px solid #ddd; padding: 10px 0;" onclick="getImg()" class="mg-auto text-c">
                        <img id="photo1" style="width: 80%; height: auto;" src="./images/舌下拍照.png">
                    </div>
                </div>
                <div class="row25 text-c mg-t10 mg-b10">如何拍照</div>
                <div style="height: 100px;" class="border-red flexBox-r just-a">
                    <div class="h100 vCenter flex1">
                        <img src="./images/查看示例.png" class="img50" />
                        <p class="mg-t5">查看示例</p>
                    </div>
                    <div class="h100 vCenter">
                        <img src="./images/箭头.png" class="img25" />
                    </div>
                    <div class="h100 vCenter flex1">
                        <img src="./images/伸出舌面.png" class="img50" />
                        <p class="mg-t5">伸出舌头</p>
                    </div>
                    <div class="h100 vCenter">
                        <img src="./images/箭头.png" class="img25" />
                    </div>
                    <div class="h100 vCenter flex1">
                        <img src="./images/拍照.png" class="img50" />
                        <p class="mg-t10">拍照</p>
                    </div>
                </div>

                <div class="mg-t15 borderT pd10">
                    <h3 class="mg-t10">拍摄注意事项:</h3>
                    <br>
                    <span>光线：白天充足、柔和的自然光线下效果最佳，避免背光、偏暗、曝光。</span>
                    <br>
                    <span>禁忌：不要在食用有色饮食或药物后、有色光源下、早晨起床时、饭后半小时内拍摄舌象。。</span>
                    <br>
                    <span>问题：无法调用相机时，请点击按钮</span>
                </div>
            </li>
            <li class="pd10" style="display: none;">
                <h3>舌下图页面</h3>
            </li>
            <li class="pd10" style="display: none;">
                <h3>面部图页面</h3>
            </li>
        </ul>

    </div>
</body>

<script>
    // 知识点：HTML DOM Element 对象 https://www.w3school.com.cn/jsref/dom_obj_all.asp

    // 选项卡：切换逻辑
    let tabsBox = document.getElementById('tabsUl');
    let allSon = tabsBox.childNodes;

    // 内容页面
    let pagesBox = document.getElementById('mainUl');
    let allpage = pagesBox.childNodes;
    // 提取所有li子节点
    let allLi = []
    for (let i = 0; i < allSon.length; i++) {
        if (allSon[i].nodeName == 'LI') {
            allLi.push(allSon[i])
        }
    }
    let pageLi = []
    for (let i = 0; i < allpage.length; i++) {
        if (allpage[i].nodeName == 'LI') {
            pageLi.push(allpage[i])
        }
    }
    // 循环分别为所有的li绑定点击事件
    for (let i = 0; i < allLi.length; i++) {
        allLi[i].onclick = function () {
            console.log("点击", i)
            clickFun(i)
        }
    }
    function clickFun(i) {
        for (let j = 0; j < allLi.length; j++) {
            if (j !== i) {
                allLi[j].className = ''
                pageLi[j].style.display = 'none'
            } else {
                allLi[j].className = 'on'
                pageLi[j].style.display = 'block'
            }
        }
    }
</script>

<script>

    let origin = window.location.origin
    let isReady = false;
    let config = null;

    // 获取配置信息
    function getConfig() {
        return new Promise((resolve, reject) => {
            let url = origin + "/getConfig"
            $.ajax({
                type: "GET",
                url,
                cache: false,
                async: true,
                beforeSend: function () {
                    //等待延迟的函数
                },
                dataType: 'json',
                // dataType: ($.browser.msie) ? "text" : "xml",
                success: function (data) {
                    console.log('getConfig-成功--', data);
                    config = data;
                    resolve()
                },
                fail: (err) => {
                    console.log('getConfig-fail--', err);
                    reject(err)
                }
            })
        })
    }

    // getMyData
    function getMyData(openid) {
        return new Promise((resolve, reject) => {
            let url = origin + "/getMyData"
            $.ajax({
                type: "post",
                url,
                data:{
                    openid
                },
                cache: false,
                async: true,
                dataType: 'json',
                // dataType: ($.browser.msie) ? "text" : "xml",
                success: function (res) {
                    console.log('getMyData-成功--', res);
                    config.data = res.data;
                    // 将图片渲染到页面
                    if(res.data.photo1){
                        $("#photo1").attr("src", res.data.photo1)
                    }
                },
                fail: (err) => {
                    console.log('getMyData-fail--', err);
                }
            })
        })
    }

    // 获取url的参数
    function getUrlParams() {
        let str = window.location.search
        console.log('str', str);
        // ?code=051YCH000vmCDN1EmM200Bdl0f3YCH0w:77 str ?
        if (str && str.includes("?") && str.includes("=")) {
            let obj = {}
            str = str.slice(1)
            if (str.includes("&")) {
                let arr = str.split("&")
                for (let i = 0; i < arr.length; i++) {
                    let one = arr[i].split("=")
                    obj[one[0]] = one[1]
                }
            } else {
                let one = str.split("=")
                obj[one[0]] = one[1]
            }
            return obj;
        }
    }

    let getInfo = () => {
        // 是否为回调页面
        let paramsObj = getUrlParams()
        console.log('paramsObj', paramsObj);
        // 防止刷新页面时，数据丢失，故需要回填数据
        let img = window.localStorage.getItem("icon")
        let name = window.localStorage.getItem("nickname")
        let openid = window.localStorage.getItem("openid")
        if (img && name && openid) {
            $("#icon").attr("src", img)
            $("#nickname").text(name)
            // 设置到config备用
            config.openid = openid;
            // 获取我的其他资料，图片等等
            getMyData(openid)
        } else if (paramsObj && paramsObj.code) {
            console.log('paramsObj', paramsObj);

            // 通过code，去获取用户信息
            let t = setTimeout(() => {
                clearTimeout(t)
                getUserInfoByCode(paramsObj.code)
            }, 1000)
        } else {
            // 初次页面，需要调起授权页面
            let backUrl = encodeURIComponent(config.userInfo_redirect_url)
            let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${backUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
            window.location.href = url;
        }
    }

    $().ready(function () {

        // 获取微信配置信息
        (async () => {
            await getConfig()
            // 自动获取用户信息
            getInfo()
        })()



        

        // function getUrlParams(url){ 
        //   const reg = /([^&?#]+)=([^&?#]+)/g; 
        //   const obj = {}; 
        //   url.replace(reg, (...arg) => { const [, arg1, arg2] = arg; obj[arg1] = arg2; }) 
        //   return obj; 
        // }
        // let rel = getUrlParams(window.location.href)
        // console.log('rel',rel);

        window.getUserInfoByCode = (code) => {
            let url = '/getUserInfo?code=' + code

            $.ajax({
                type: "GET",
                url,
                cache: false,
                async: true,
                beforeSend: function () {
                    //等待延迟的函数
                },
                dataType: 'json',
                // dataType: ($.browser.msie) ? "text" : "xml",
                success: function (data) {
                    console.log('getQrCode-成功--', data);
                    $("#icon").attr("src", data.headimgurl)
                    $("#nickname").text(data.nickname)

                    // 持久化到浏览器 
                    window.localStorage.setItem('icon', data.headimgurl)
                    window.localStorage.setItem('nickname', data.nickname)
                    window.localStorage.setItem('openid', data.openid)
                    // 调回初始页面: 否则影响js-api的调用，因为影响算法计算
                    window.location.href = '/html'
                },
                fail: function (err) {
                    console.log('getQrCode-err--', err);
                }
            })
        }

        window.getQrCode = () => {
            let data = {
                "expire_seconds": 604800,
                "action_name": "QR_SCENE",
                "action_info": {
                    "scene": { "scene_id": 123 }
                }
            }

            let url = '../getQrCode'
            $.ajax({
                type: "POST",
                url,
                data,
                cache: false,
                async: false,
                dataType: 'json',
                // dataType: ($.browser.msie) ? "text" : "xml",
                success: function (data) {
                    console.log('getQrCode-成功--', data);
                    // showQrCode(xmlobj)
                    let url = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${data.ticket}`
                    // 这样前端get请求，跳转页面
                    window.location.href = url;
                }
            });
        }

        function showQrCode(data) {
            let url = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${data.ticket}`
            $.ajax({
                type: "Get",
                url,
                cache: false,
                async: false,
                dataType: 'json',
                // dataType: ($.browser.msie) ? "text" : "xml",
                success: function (xmlobj) {
                    console.log('QrCode-成功--', xmlobj);
                }
            });
        }

        function getLocalData(localid, imgName="photo1") {
            // $('#modal-img').show();
            //获取本地图片资源
            wx.getLocalImgData({
                localId: localid, // 图片的localID 
                success: function (res) {
                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                    console.error("----------开始解析图片----localData-----------------:", localData.length)
                    photo1.setAttribute('src', localData)
                    
                    
                    //将图片上传给后台
                    $.ajax({
                        url: origin+"/wx_upload_img",
                        type: "post",
                        data: {
                            openid: config.openid,
                            [imgName]: localData
                        },
                        async: true,
                        success: function (res) {
                            // location.reload();
                            console.log("上传成功：",res)
                        },
                        complete: function () {
                        }
                    })
                }
            });

        }
        // 原文链接：https://blog.csdn.net/qq_23543983/article/details/80438317


        window.getImg = async () => {
            await checkApi()
            console.log('执行--');
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    console.error("图像选择结果：", res)
                    localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    // 'https://www.baidu.com/img/flexible/logo/pc/result.png'

                    getLocalData(localIds[0])
                }
            });
        }


        // 测试js-api
        function checkApi() {
            if (isReady) { return }
            return new Promise((resolve, reject) => {
                // 获取最新的token对象
                let url = '../wx'
                let rel;
                $.ajax({
                    type: "get",
                    url,
                    cache: false,
                    async: false,
                    dataType: 'json',
                    // dataType: ($.browser.msie) ? "text" : "xml",
                    success: function (xmlobj) {
                        rel = xmlobj
                        console.log('成功--', xmlobj);
                    }
                }).responseText;

                console.log('token信息对象: ', typeof rel, rel, rel.length);

                var localIds = '';
                let photo1 = document.getElementById('photo1')

                console.log('wx', wx);
                let obj = rel;
                // const obj ={
                //   "appId":"wx3680aee5b396cc0f",
                //   "timestamp":1637402688718,
                //   "nonceStr":"5158860791725619",
                //   "signature":"c383d0d37c13fed1f5cefe2c33776025c95816bc"};

                // 'getNetworkType', 'updateTimelineShareData'
                const jsArr = [
                    'openLocation', 'chooseImage',
                    'getLocation', 'onMenuShareQZone'
                ]
                wx.config({
                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: obj.appId, // 必填，公众号的唯一标识
                    timestamp: obj.timestamp, // 必填，生成签名的时间戳
                    nonceStr: obj.nonceStr, // 必填，生成签名的随机串
                    signature: obj.signature,// 必填，签名
                    jsApiList: jsArr // 必填，需要使用的JS接口列表
                });

                wx.ready(function (a, b) {
                    console.log('read', a, b);

                    wx.checkJsApi({
                        jsApiList: jsArr, // 需要检测的JS接口列表，所有JS接口列表见附录2,
                        success: function (res) {
                            console.error('success--ready--123-456', res);
                            let str = $('<div></div>')
                            let obj = res.checkResult
                            for (const key in obj) {
                                if (obj[key]) {
                                    str.append($(`<p>${key}</p>`))
                                }
                            }
                            $('#apiList').html(str)
                            isReady = true;
                            resolve()
                            // 以键值对的形式返回，可用的api值true，不可用为false
                            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                        }
                    });
                    // wx.updateTimelineShareData({
                    //   title: '12', // 分享标题
                    //   link: 'http://www.baidu.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    //   imgUrl: '', // 分享图标
                    //   success: function () {
                    //     // 设置成功
                    //   }
                    // })
                    // wx.getNetworkType({
                    //   success: function (res) {
                    //     var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
                    //   }
                    // });
                    // wx.getLocation({
                    //   type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                    //   success: function (res) {
                    //     console.error('location:', res);
                    //     var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    //     var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    //     var speed = res.speed; // 速度，以米/每秒计
                    //     var accuracy = res.accuracy; // 位置精度

                    //     wx.openLocation({
                    //       latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
                    //       longitude: 113.377785, // 经度，浮点数，范围为180 ~ -180。
                    //       name: longitude, // 位置名
                    //       address: '我的地址', // 地址详情说明
                    //       scale: 25, // 地图缩放级别,整形值,范围从1~28。默认为最大
                    //       infoUrl: 'http://www.baidu.com/' // 在查看位置界面底部显示的超链接,可点击跳转
                    //     });
                    //   },
                    //   error: (err) => {
                    //     console.error('err', err);
                    //   }
                    // });
                    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                });
                wx.error(function (a, b) {
                    console.error('error', a, b);
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                });
            })
        }

    })
</script>

</html>